<template>
    <div>
        <!-- 55555/ -->
        <el-dialog :title="myDialog.title" :visible.sync="myDialog.flag" width="60%">
            <el-form :model="formData">
                <el-form-item label="角色名称" label-width="80px">
                    <el-input v-model="formData.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" label-width="80px">
                    <el-input v-model="formData.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
                <!-- {{formData}} -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="myDialog.flag = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    props:{
        myDialog:Object,
        formData:Object,
    },
    methods:{
        async submit() {
            // alert('哈哈')
            if (this.myDialog.type == "add") {
                /* 请求添加角色接口 */
                let res = await this.$http.post('roles',this.formData);
                // console.log(res);
                if(res.meta.status == 201) {
                    this.$message.success(res.meta.msg);
                    this.close();
                    this.$emit('getRoles');
                }
            } else if (this.myDialog.type == 'edit') {
                /* 调用编辑角色接口 */
                let res = await this.$http.put(`roles/${this.formData.roleId}`,this.formData);
                console.log(res)
                if(res.meta.status == 200) {
                    this.$message.success(res.meta.msg);
                    this.close();
                    this.$emit('getRoles');
                }
            }
        },
        /* 关闭模态框 */
        close() {
            this.myDialog.flag = false;
        },
        add(can) {
            console.log(can);
        }
    }
}
</script>